<template>
  <view class="home">
    <view class="home_header">
      <view class="home_header_title">
        <!-- <image src="/static/tabs/caidan.png" mode="" @click="getgroup" /> -->
        <text @click="getgroup">{{ detaildata.ageGroupTitle }}</text>
        <image class="icon" src="/static/homeicon/icon.png" @click="getgroup" mode="" />
      </view>
      <image class="home_header_banner" :src="detaildata.ylgyImg" mode="scaleToFill" />
      <!-- <view class="home_header_navlist">
        <image :src="detaildata.wxnlImg" mode="scaleToFill" />
        <view class="home_header_navlist_item" v-for="item in 5">
          <image src="/static/tabs/fengmian.png" mode="aspectFill" />
          <text>大运动</text>
        </view>
      </view> -->
    </view>
    <view class="home_navigation">
      <view class="home_title">
        <view>一日育儿导航</view>
      </view>
      <view class="home_navigation_list list1">
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye1" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img1.png" />
          <view>晨起音乐<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye2" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img2.png" />
          <view>韵律活动<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye3" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img3.png" />
          <view>亲子游戏<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye4" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img4.png" />
          <view>磨耳朵1<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
      </view>
      <view class="home_navigation_list list2">
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye5" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img5.png" />
          <view>音乐哆唻咪<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye6" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img4.png" />
          <view>磨耳朵2<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye7" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img6.png" />
          <view>语言天地<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye8" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img7.png" />
          <view>亲子阅读<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye9" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img8.png" />
          <view>玩具乐园<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>

      </view>
      <view class="home_navigation_list list3">
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye10" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img9.png" />
          <view>睡前故事<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye11" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img10.png" />
          <view>睡前安抚活动<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye12" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/homeicon/img11.png" />
          <view>晚安摇篮曲<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
      </view>
    </view>
    <view class="home_overview">
      <view class="home_title">
        <view>家庭养育工具包</view>
      </view>
      <view class="home_overview_list">
        <view class="home_overview_list_item" v-for="item in detaildata.bbcz" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image :src="item.coverImg" mode="aspectFill" />
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <view class="home_topics">
      <view class="home_title" style="margin-top: 10rpx;">
        <view>养育重点和热点话题</view>
      </view>
      <view class="home_topics_list">
        <view class="home_topics_list_item" v-for="item in detaildata.rdht" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image mode="aspectFill" :src="item.coverImg"></image>
          <text :class="item.resLabel == 'rd' ? '' : 'ZD'">{{ item.resLabel == 'rd' ? '热点' : '重点' }}</text>
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="home_topics">
      <view class="home_title" style="margin-top: 10rpx;">
        <view>健康营养和安全照护</view>
      </view>
      <view class="home_topics_list">
        <view class="home_topics_list_item" v-for="item in detaildata.jkyyaq" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image mode="aspectFill" :src="item.coverImg"></image>
          <view style="left: 238rpx;">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { detailGroup } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const detaildata: any = ref({})
const id = ref<any>()
const groupid = ref('')
onLoad(async (options: any) => {
  id.value = options.id
  uni.removeStorageSync('groupid')
  getdetailGroup(id.value, groupid.value, userStore.userInfo?.babyId)
})
onShow(() => {
  groupid.value = uni.getStorageSync('groupid') ? uni.getStorageSync('groupid') : ''
  getdetailGroup(id.value, groupid.value, userStore.userInfo?.babyId)
})
const getdetailGroup = async (id: Number, ageGroupId: Number | string, babyId: Number) => {
  let res: any = await detailGroup({ courseBigId: id, ageGroupId, babyId })
  if (res.code == 0) {
    detaildata.value = res.data
  }
}
const getgroup = () => {
  uni.navigateTo({
    url: `/pages/grouplist/index?id=${id.value}`
  })
}
const godetail = (id: any) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${id}`
  })
}
</script>

<style lang="scss">
page {
  background-color: #F5F5F5;
}

.home {
  &_title {
    display: flex;
    margin-top: 40rpx;

    view {
      font-weight: 600;
      font-size: 36rpx;
      color: #000000;
      line-height: 48rpx;
      margin-left: 16rpx;
    }
  }

  &_header {
    width: 100%;
    padding-top: 32rpx;
    padding-bottom: 24rpx;
    // background-color: #fff;

    &_title {
      display: flex;
      margin: 0 34rpx 28rpx 34rpx;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      text {
        margin-left: 20rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #2F2F2F;
        line-height: 32rpx;
      }
    }

    &_banner {
      display: block;
      width: calc(100vw - 64rpx);
      height: 272rpx;
      border-radius: 16rpx;
      margin: auto;
      // background-color: pink;
    }

    &_navlist {
      display: flex;
      margin: 46rpx 34rpx 0;

      image {
        height: 180rpx;
        width: 100%;
        border-radius: 16rpx;
      }

      // &_item {
      //   display: flex;
      //   flex-wrap: wrap;

      //   image {
      //     width: 130rpx;
      //     height: 130rpx;
      //   }

      //   text {
      //     width: 130rpx;
      //     font-weight: 300;
      //     font-size: 28rpx;
      //     color: #2F2F2F;
      //     line-height: 40rpx;
      //     text-align: center;
      //     display: block;
      //     margin-top: 10rpx;
      //   }
      // }
    }
  }

  &_navigation {
    margin: 0 34rpx;

    &_list {
      padding: 20rpx 30rpx 30rpx 28rpx;
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 16rpx;
      margin-top: 16rpx;

      &_item {
        width: calc(100vw - 126rpx);
        height: 48rpx;
        margin-top: 16rpx;
        position: relative;

        .img {
          width: 48rpx;
          height: 48rpx;
          position: absolute;
          left: 0;
        }

        view {
          font-weight: 300;
          font-size: 28rpx;
          color: #2F2F2F;
          line-height: 48rpx;
          position: absolute;
          left: 70rpx;
          max-width: 80%;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;

          /* 显示省略号 */
          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #2F2F2F;
            margin-left: 6rpx;
          }
        }

        .icon {
          width: 16rpx;
          height: 28rpx;
          position: absolute;
          right: 0;
          top: 10rpx;
        }
      }
    }

    .list1 {
      background-size: 100%;
      background-position: top;
      background-repeat: no-repeat;
      background-image: url('https://babycare-zjmf.oss-cn-beijing.aliyuncs.com/default/img/2025/06/21/8d44fad503348f4deccc38e2308809c4.png');
    }

    .list2 {
      background-size: 100%;
      background-position: top;
      background-repeat: no-repeat;
      background-image: url('https://babycare-zjmf.oss-cn-beijing.aliyuncs.com/default/img/2025/06/21/d640d4e79d998ddfabb5d09d130eeb0d.png');
    }

    .list3 {
      background-size: 100%;
      background-position: top;
      background-repeat: no-repeat;
      background-image: url('https://babycare-zjmf.oss-cn-beijing.aliyuncs.com/default/img/2025/06/21/a9bdb74fa6627617bd6271a75bcf696e.png');
    }
  }

  &_overview {
    margin: 0 34rpx;

    &_list {
      display: flex;
      margin-top: 18rpx;
      flex-wrap: wrap;
      justify-content: space-between;

      &_item {
        display: flex;
        flex-wrap: wrap;
        width: 206rpx;
        margin-bottom: 30rpx;

        image {
          width: 206rpx;
          height: 144rpx;
          border-radius: 12rpx;
        }

        text {
          font-weight: 300;
          font-size: 24rpx;
          color: #2F2F2F;
          line-height: 34rpx;
          width: 100%;
          text-align: center;
          display: block;
          margin-top: 10rpx;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }
      }
    }
  }

  &_topics {
    margin: 0 34rpx;
    padding-bottom: 50rpx;

    &_list {
      padding: 24rpx 18rpx;
      background-color: #fff;
      border-radius: 16rpx;
      margin-top: 16rpx;
      width: 650rpx;
      // height: 400rpx;

      &_item {
        font-weight: 300;
        font-size: 28rpx;
        color: #353535;
        line-height: 72rpx;
        text-align: left;
        height: 72rpx;
        margin-bottom: 24rpx;
        height: 116rpx;
        position: relative;

        image {
          width: 200rpx;
          height: 116rpx;
          background: #D9D9D9;
        }

        text {
          display: block;
          width: 56rpx;
          height: 36rpx;
          background: rgba(255, 192, 197, 0.16);
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          font-weight: 600;
          font-size: 16rpx;
          color: #FFC0C5;
          text-align: center;
          line-height: 36rpx;
          position: absolute;
          top: 38rpx;
          left: 220rpx;
        }

        .ZD {
          color: #C5EBFE;
          background: rgba(197, 235, 254, 0.16);
        }

        view {
          font-weight: 400;
          font-size: 26rpx;
          line-height: 40rpx;
          color: #000000;
          position: absolute;
          top: 50%;
          left: 284rpx;
          transform: translateY(-50%);
        }
      }

      &_item:last-child {
        border: none;
      }
    }
  }
}
</style>
